<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<div  layout:fragment="content">
    <div class="row mt-10">
        <div class="col-xs-12 col-md-9 main">
            <div th:if="${#sets.size(categories)>0}" class="widget-category clearfix mb-10">
                <div class="col-sm-12">
                    <ul class="list">
                        <li><a href="/articles">全部</a></li>
                        <li th:each="category:${categories}" th:classappend="${category.id=condition.categoryId}?'active'" ><a th:href="|/articles/${category.slug}|" th:text="${category.name}"></a></li>
                    </ul>
                </div>
            </div>
            <ul class="nav nav-tabs mb-10 mt-20">
                <li th:classappend="${condition.filter == 'newest'}?'active'" ><a  th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&|">最新文章</a></li>
                <li th:classappend="${condition.filter == 'newcomment'}?'active'" ><a  th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=newcomment|">最新评论</a></li>
                <li th:classappend="${condition.filter == 'mostview'}?'active'" ><a  th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=mostview|">最多查看</a></li>
                <li th:classappend="${condition.filter == 'mostcomment'}?'active'" ><a  th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=mostcomment|">最多评论</a></li>
                <!--<li th:classappend="${condition.filter == 'best'}?'active'" ><a th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=best|">精华</a></li>-->
                <li th:classappend="${condition.filter == 'recommend'}?'active'"><a  th:href="|${#request.getRequestURI()}?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=recommend|">推荐</a></li>
            </ul>
            <div class="stream-list blog-stream">
                <section th:each="article:${articles}" class="stream-list-item clearfix">
                    <div th:if="${article.logo}" class="blog-rank hidden-xs">
                        <a th:href="|/article/${article.id}|" target="_blank"><img style="width: 200px;height:120px;" th:src="${article.logo}"></a>
                    </div>
                    <div class="summary">
                        <h2 class="title"><a th:href="|/article/${article.id}|" target="_blank" th:text="${article.title}" ></a></h2>
                        <p class="excerpt wordbreak" th:text="${article.summary}"></p>
                        <ul class="author list-inline mt-20">
                            <li class="pull-right" th:title="|${#sets.size(article.collections)} 收藏|">
                                <span class="glyphicon glyphicon-bookmark"></span> <th:block th:text="${#sets.size(article.collections)}"/>
                            </li>
                            <li class="pull-right" th:title="|${#sets.size(article.supports)} 推荐|">
                                <span class="glyphicon glyphicon-thumbs-up"></span> <th:block th:text="${#sets.size(article.supports)}"/>
                            </li>
                            <li>
                                <a th:href="|/space/${article.user.id}|" target="_blank">
                                    <img class="avatar-20 mr-10 hidden-xs" th:src="${article.user.avatar}" th:alt="${article.user.nickname}"> <th:block th:text="${article.user.nickname}"/>
                                </a>
                            </li>
                            <li>发布于 <th:block th:text="${#dates.format(article.createdAt,GlobalSetting.time.dateFormat+' '+GlobalSetting.time.timeFormat)}"></th:block></li>
                            <li>阅读 ( <th:block th:text="${article.views}"></th:block> )</li>

                        </ul>
                    </div>
                </section>

            </div>

            <div class="text-center">
                <ul class="pagination">
                    <li th:onclick="'javascript:goToPage(1)'" class="page-item" th:classappend="${articles.number+1 == 1}?disabled:''">
                        <a class="page-link" th:href="|?page=1&size=${articles.size}&categoryId=${condition.categoryId}&filter=${condition.filter}|" rel="prev">‹</a>
                    </li>
                    <li th:each="i:${#numbers.sequence(articles.number+1-6,articles.number+6)}" class="page-item" th:classappend="${articles.number+1 == i}?'active':''" th:if="${i>0 and i<=articles.totalPages}">
                        <a class="page-link" th:href="|?page=${i}&size=${articles.size}&categoryId=${condition.categoryId}&filter=${condition.filter}|" th:text="${i}"></a>
                    </li>
                    <li th:onclick="'javascript:goToPage('+${articles.totalPages}+')'" class="page-item" th:classappend="${articles.number+1 == articles.totalPages}?disabled:''">
                        <a class="page-link" th:href="|?page=${articles.totalPages}&size=${articles.size}&categoryId=${condition.categoryId}&filter=${condition.filter}|" rel="next">›</a>
                    </li>
                </ul>
            </div>
        </div><!-- /.main -->
        <div class="col-xs-12 col-md-3 side">
            <div class="side-alert alert alert-warning">
                <p>今天，有什么经验需要分享呢？</p>
                <a href="/article/create" class="btn btn-primary btn-block mt-10">立即撰写</a>
            </div>
            <th:block th:include="themes/default/layout/auth_menu"></th:block>

            <div class="widget-box">
                <h2 class="h4 widget-box__title">推荐文章</h2>
                <ul class="widget-links list-unstyled list-text">
                    <li th:each="article:${hotArticles}" class="widget-links-item">
                        <a title="{{ $hotArticle->title }}" th:href="|/article/${article.id}|" th:text="${article.title}"></a>
                        <small class="text-muted"><th:block th:text="${article.supportNum}"></th:block> 推荐</small>
                    </li>
                </ul>
            </div>

            <div class="widget-box">
                <h2 class="h4 widget-box-title">热门作者 <a href="{{ route('auth.top.articles') }}">»</a></h2>
                <ul class="list-unstyled">
                    <li th:each="hotUser:${hotUsers}" class="media  widget-user-item ">
                        <a th:href="|/space/${hotUser.id}|" class="user-card pull-left" target="_blank">
                            <img class="avatar-50"  th:src="${hotUser.avatar}" th:alt="${hotuser.nickname}"></a>
                        </a>
                        <div class="media-object">
                            <strong><a th:href="|/space/${hotUser.id}|" th:text="${hotuser.nickname}"></a></strong>

                            <p class="text-muted"> <th:block th:text="${#sets.size(hotUser.articles)}"></th:block> 篇文章，<th:block th:text="${#sets.size(hotUser.supports)}"></th:block> 赞同</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="widget-box">
                <h2 class="h4 widget-box-title">热议话题 <a href="{{ route('website.topic') }}" title="更多">»</a></h2>
                <ul class="taglist-inline multi">
                    <li th:each="hotTag:${hotTags}" class="tagPopup"><a class="tag" data-toggle="popover"  th:href="|/topic/${hotTag.id}|" th:text="${hotTag.name}"></a></li>
                </ul>
            </div>

        </div>
    </div>
</div>